<!--
 * @Descripttion: 
 * @version: 
 * @Author: wutao
 * @LastEditors: wutao
 * @LastEditTime: 2025-09-02 11:20:40
-->
<template>
  <div>
    <!-- <div class="top_hytitle" style="margin-top: 0;">
                <div class="letf_line"></div>
                <div class="center_text">欢迎回来</div>
                <div class="right_line"></div>
              </div> -->
    <div class="">
      <p style="margin: 15px 0; color: #9998a9">
        {{ formatTimestamp(topList.createTime) }}
      </p>

      <div class="top-box" :class="isShadow ? 'boxShadow' : ''">
        <p>
          <img
            :src="topList.type == 'jbnb'
                ? require('../../assets/iconIndex/jb_logo.png')
                : topList.type == 'jbyjb'
                ? require('../../assets/iconIndex/yjkbyjb.png')
                : topList.type == 'jbzb'
                ? require('../../assets/iconIndex/yjkbzb.png')
                : require('../../assets/iconIndex/yjkbsjb.png')
            "
            class="jb_logo"
            alt=""
          />
          <!-- <span>{{ topList.title }}</span> -->
        </p>
        <div
          class="item-box"
          :class="{ 'two-item-layout': tableTop.length === 2 }"
        >
          <div
            @click="checkType(index)"
            class="item-box-div"
            v-for="(item, index) in tableTop"
            :key="index"
            :class="{ itemStype: item.isCheck == true }"
          >
            {{ item.title }}
          </div>
        </div>
        <div
          style="overflow-x: auto; background-color: #fbfbfe"
          class="containers"
        >
          <div class="table-top">
            <span>股票名称</span>
            <span>公告日期</span>
            <span>{{ topList.type == "jbnb" ? "预告类型" : "每股收益" }}</span>
            <span>{{
              topList.type == "jbnb" ? "预期净利变动" : "净利润同比"
            }}</span>
          </div>
          <div class="table-cen">
            <div v-for="(item, index) in tableDataTop3" :key="index">
              <span style="font-weight: bold">
                {{ item.gpmc }}
                <span
                  style="
                    color: #666666;
                    text-align: left;
                    margin-top: 6px;
                    padding-left: 0;
                    font-weight: normal;
                  "
                  >{{ item.gpdm }}</span
                >
              </span>
              <span>{{ item.ggrq }}</span>
              <span>{{
                topList.type == "jbyjb"
                  ? Number(item.mgsy).toFixed(2)
                  : item.yglx
              }}</span>
              <span>{{
                topList.type == "jbyjb"
                  ? Number(item.jlrtb).toFixed(2) + "%"
                  : item.yqjlbd
              }}</span>
            </div>
          </div>
        </div>

        <div class="top-box-btn" @click="djrbseechance">点击查看全部数据</div>
        <p class="askMe">你可以尝试这样问我</p>
        <div
          @click="sendMessageBy(topItemLink)"
          v-for="(topItemLink, topItemLinkIndex) in topList.link"
          class="top-box-list-item-link"
          :key="topItemLinkIndex"
        >
          {{ topItemLink }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {} from "@/utils/common";
import { Toast } from "vant";
import commonFunc from "@/utils/ysjh";
import KmcInteraction from "../../utils/js/kmc-interaction";
import Index from "../parentsBox/index.vue";
export default {
  data() {
    return {
      tableData: [],
      tableTop: [],
      tableDataTop3: [],
    };
  },
  props: {
    topList: {
      type: Object,
      default: () => {},
    },
    isShadow: {
      type: Boolean,
      default: false,
    },
  },
  watch: {},
  mounted() {},
  created() {
    const sTypeArr = [
      ...new Set(
        (this.topList?.card || []).map((item) => item.map.table).filter(Boolean)
      ),
    ];
    const resulta = sTypeArr.map((type, index) => ({
      isCheck: index === 0, // 第一个为 true，其余 false
      title: type,
    }));

    const arr = this.topList.card;
    // 用 Map 分组
    const groupMap = new Map();
    if (arr) {
      arr.forEach((item) => {
        const table = item.map.table; // 分组依据
        const data = {
          gpdm: item.map.gpdm,
          yglx: item.map.yglx,
          yqjlbd: item.map.yqjlbd,
          table: item.map.table,
          gpmc: item.map.gpmc,
          mgsy: item.map.mgsy,
          jlrtb: item.map.jlrtb || "",
          ggrq: item.map.ggrq || "",
        };

        if (!groupMap.has(table)) {
          groupMap.set(table, []);
        }
        groupMap.get(table).push(data);
      });
    }

    // 转换成目标格式
    const result = Array.from(groupMap, ([type, data]) => ({
      type,
      data,
    }));

    this.tableData = result;

    this.tableTop = resulta;

    console.log(222, this.tableTop);
    console.log(222, this.tableData);

    this.getTable();
  },
  methods: {
    getTable() {
      this.tableTop.forEach((item) => {
        if (item.isCheck == true) {
          this.tableData.forEach((itema) => {
            if (itema.type == item.title) {
              this.tableDataTop3 = itema.data;
            }
          });
        }
      });
    },
    checkType(e) {
      this.tableTop.forEach((item, index) => {
        item.isCheck = false;
      });

      this.tableTop[e].isCheck = true;
      this.getTable();
    },
    sendMessageBy(e) {
      this.$parent.showCollect = false;
      this.$parent.someMethod(e);
    },
    djrbseechance() {
      console.log(this.topList.url, "this.topList.url");
      let openSource = this.topList.url.openSource;
      let openType = this.topList.url.openType;
      let functionCode = this.topList.url.functionCode;
      let param = this.topList.url.param;
      // console.log("转换后的字符串:", param, "类型:", typeof param);
      // console.log(functionCode, "functionCode");
      // console.log(openType, "openType");
      // console.log(openSource, "openSource");
      commonFunc.openService(openSource, openType, functionCode, param);
    },
    formatTimestamp(ms) {
      if (!ms) {
        return "";
      }
      const time = Number(ms);
      if (!time || isNaN(time)) return "-";
      const d = new Date(time);
      const Y = d.getFullYear();
      const M = String(d.getMonth() + 1).padStart(2, "0");
      const D = String(d.getDate()).padStart(2, "0");
      const h = String(d.getHours()).padStart(2, "0");
      const m = String(d.getMinutes()).padStart(2, "0");
      const s = String(d.getSeconds()).padStart(2, "0");
      return `${Y}-${M}-${D} ${h}:${m}:${s}`;
    },
  },
};
</script>

<style lang="less" scoped>
.ztfx-span {
  opacity: 1;
  color: #666666 !important;
  font-family: PingFang SC;
  font-weight: regular;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: 0px;
  text-align: justified;
  background: none !important;
  font-weight: normal !important;
}

.top-box-list-item-border {
  // border-bottom: 1px solid #aecde8;
}

.top-box-list {
  padding-bottom: 1px !important;
}

.gzlc_box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 70px;
  height: 32px;
  background: url("@/assets/images/gzlc_box.png") no-repeat center center;
  background-size: 100% 100%;
  margin-top: 5px;
  font-size: 13px;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: normal;
  color: #232428;
  margin-bottom: 10px;

  img {
    width: 10px;
    height: 10px;
    margin-right: 5px;
    vertical-align: middle;
  }
}

.cn-dz {
  display: flex;
}

.cn-dz div {
  width: 97px;
  height: 36px;
  background: url("@/assets/iconIndex/xgcl_box.png") no-repeat center center;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  margin-top: 12px;
  color: #333333;
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 13px;
}

.cn-dz div img {
  width: 14px;
  height: 14px;
  margin-right: 4px;
}

.item-box {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
}

.item-box-div {
  border-radius: 14px;
  background: #ecececb2;
  padding: 6px 10px;
  box-sizing: border-box;

  color: #333333;
  font-family: PingFang SC;
  font-weight: regular;
  font-size: 13px;
}

.itemStype {
  color: #e72e2e;
  background: #f9e7e9;
}

.table-top {
  display: flex;
  align-items: center;
  width: 400px;
  background: #f6f6f6;
  height: 40px;
  border-radius: 12px 12px 0 0;
  margin-top: 10px;
}

.table-cen {
  display: flex;
  align-items: center;
  width: 400px;
  border-radius: 12px 0 0 0;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
}

.table-cen div {
  width: 400px;
  height: 55px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #f6f6f6;
}

.table-cen div span {
  width: 100px;
  display: inline-block;
  font-size: 15px;
  padding-left: 10px;
  color: black;
}

.table-top span {
  width: 100px;
  display: inline-block;
  font-size: 14px;
  padding-left: 10px;
  color: #666666;
}
.containers {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}
.container::-webkit-scrollbar {
  display: none; /* Chrome/Safari/Opera */
}
.item-box {
  display: flex;
  justify-content: space-between; // 原样式：数量≠2时分散排列
  margin-top: 12px;
  // 新增：给标题容器加默认padding（可选，避免贴边）
  padding: 0 4px;
}

// 仅当标题数量=2时生效：从左到右排列 + 标题间距
.two-item-layout {
  justify-content: flex-start; // 从左对齐
  gap: 12px; // 两个标题之间的间距（可根据需求调整数值）
}

// 原有其他样式（如.item-box-div、.itemStype等）不变
.item-box-div {
  border-radius: 14px;
  background: #ecececb2;
  padding: 6px 10px;
  box-sizing: border-box;
  color: #333333;
  font-family: PingFang SC;
  font-weight: regular;
  font-size: 13px;
}

.itemStype {
  color: #e72e2e;
  background: #f9e7e9;
}
.jb_logo {
  width: 153px;
  height: 23px;
}
</style>